<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div></div>
		<script>
			window.onload = function() {
				var oBj = new tz();
				oBj.tt();
			}
			class tz {
				constructor() {
					this.oDiv = document.getElementsByTagName("div")[0];
				}
				tt() {
					var _this = this;
					_this.oDiv.onmousedown = function(ev) {
						_this.ev = ev || event;
						_this.ol = ev.clientX - _this.oDiv.offsetLeft;
						_this.ot = ev.clientY - _this.oDiv.offsetTop;
						document.onmousemove = function(ev) {
							_this.ev = ev || event;
							_this.oll = ev.clientX - _this.ol;
							_this.olt = ev.clientY - _this.ot;

							_this.oDiv.style.left = _this.oll + "px";
							_this.oDiv.style.top = _this.olt + "px";
						}
						document.onmouseup = function() {
							document.onmousemove = null;
							document.onmouseup = null;
						}
						return false;
					}
				}
			}
		</script>

	</body>

</html>